<template>
    <div>
        
        <transition
   appear
   appear-class="custom-appear"
   appear-to-class="custom-appear-to"
   appear-active-class="custom-appear-active"
> 
           <p>appear只是一个默认进场的语法糖</p>
        </transition>
        <!-- <button @click="showAnima">点击我</button> -->
    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
               isShow : false 
            }
        },
        methods : {
            showAnima(){
                var _this = this;
                setTimeout(function(){
                    _this.isShow=!_this.isShow
                },100)
            },
        }
        
    }
</script>

<style scoped>
    p{height: 20px;background-color: #ddd}
    .fadein-enter{
        background-color: red;  
    }
    .fadein-enter-active {
        transition: all 2s linear;
    }
    .fadein-enter-to{
        background-color: green;
    }
    .fadein-leave{
        background-color: yellow;
    }
    .fadein-leave-active {
        transition: all 2s linear;
    }
    .fadein-leave-to{
        background-color: blue;
    }

    .custom-appear-active{
  transition: all 2s ease;
}
.custom-appear{
  background: red;
}
.custom-appear-to{
  background:green;
}

</style>
